<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      /* 
            定时器的本质就是,在指定时间后将函数添加到消息队列中

        */

      /* 
            setInerval() 每间隔一段时间就将函数添加到消息队列中去
                但是如果函数执行速度比较慢,它是无法确保每次执行的间隔都是一样的
            
        */
      console.time;
      setInterval(() => {
        console.timeEnd();
        alert('执行');
        console.time();
      }, 3000);
      // 希望确保每次执行函数都有相同的间隔的划 可以通过回调函数的方式来操作

      console.time();
      setTimeout(
        (fn = () => {
          console.timeEnd();
          alert('GG');
          setTimeout(fn, 3000);
        }),
        3000
      );

      setTimeout(() => {
        console.log('gg');
      }, 0);
      console.log('SS');

      // 会先出现SS, 因为就算是0毫秒,但其实也是塞进队列中,如果堆栈中有还没执行完的,还是要等.
    </script>
  </body>
</html>
